import React from "react"
import {getCheckCity,searchAddress} from "../../api/index"
import "./searchcity.css"
import {Icon} from "antd-mobile"
class SearchAddress extends React.Component{
    constructor(){
        super()
        this.state={
            nowCity:{},
            searchText:"",
            addressArr:[],
            flag:true
        }
    }
    componentWillMount(){
        let histroy = JSON.parse(localStorage.getItem("historyAddress"))
        console.log(histroy)
        if(histroy){
            this.setState({
                addressArr:[...histroy],
                flag:true,
            })
        }else{
            this.setState({
                addressArr:[],
                flag:false
            })
        }
       
    }
    componentDidMount(){
   
        getCheckCity(this.props.match.params.cityid).then(res=>{
            // console.log(res.data)
            this.setState({
                nowCity:res.data
            })
        })
    }
    inputHandler(e){
          this.setState({
              searchText:e.target.value
          })
    }
    toMsite(item){
        let histroy = JSON.parse(localStorage.getItem("historyAddress"))
        console.log(item)
        this.props.history.push("/app/msite?latitude="+item.latitude+"&longitude="+item.longitude+"&name="+item.name)
        localStorage.setItem("geohash",JSON.stringify({latitude:item.latitude,longitude:item.longitude,name:item.name}))
        let arr=[];
        if(histroy){
            let res = histroy.find(list=>list.geohash==item.geohash)
            
            if(res){
                return false
            }else{
            
                histroy.push(item)
                localStorage.setItem("historyAddress",JSON.stringify(histroy))
            
                console.log(item)
            }
        }else{
            arr.push(item)
            localStorage.setItem("historyAddress",JSON.stringify(arr))
        }
        // localStorage.setItem("historyAddress",arr)
        
    }
    submitHandler(){
       
        let {cityid}  = this.props.match.params.cityid
        searchAddress(cityid,this.state.searchText).then(res=>{
            
            this.setState({
                addressArr:res.data
            })
        })
    }
    delHistoryAddress(){
        this.setState({
            addressArr:[],
            flag:false
        })
        localStorage.removeItem("historyAddress")
    }
    goBack(){
  
        this.props.history.go(-1)
    }
    switchCity(){
        this.props.history.push("/home")
    }
    render(){
          //当前的传过来的id
        //   console.log(this.state.nowCity)
        console.log(this.state.addressArr)
        return(
            <div className="searchcity">
                <div className="searchcity-header">
                     <Icon type="left" className="searchcity-main-leftIcon" onClick={this.goBack.bind(this)}/>
                     <div className="showCityName">{this.state.nowCity.name}</div>
                     <span className="switchCity" onClick={this.switchCity.bind(this)}>切换城市</span>
                 </div>
                 <div className="searchcity-main">
                     <div className="inputWrap">
                         <input type="text" placeholder="请输入学校,地址,商务楼" value={this.state.searchText} onChange={this.inputHandler.bind(this)}/>
                     </div>
                     <div className="submit-wrap">
                         <button onClick={this.submitHandler.bind(this)}>提交</button>
                     </div>
                 </div>
                 <div className='searchHistory'>
                      <div className="searchHistory-title">搜索历史</div>
                      <ul className="searchHistory-main">
                          {this.state.addressArr.map(item=>{
                              return(
                                <li key={item.geohash} onClick={this.toMsite.bind(this,item)}>
                                    <h4>{item.name}</h4>
                                    <span className="searchHistory-address">{item.address}</span>
                                </li>
                              )
                          })}
                      </ul>
                 </div>
                 <div className="footer" style={this.state.flag?{display:"flex"}:{display:"none"}}>
                     <span onClick={this.delHistoryAddress.bind(this)}>清空所有</span>
                 </div>
            </div>
        )
    }
}

export default SearchAddress